<template>
  <zw-card title="工单数据统计" :line="2">
    <div class="order-statistic">
      <zw-date-range-picker v-model="dateRange" seperator="-"></zw-date-range-picker>
      <!-- 统计按快递接收日期、工单创建日期统计每日的订单量，折线图 -->
      <div class="item" id="dateStatistic" style="width: 100%; height: 100%;"></div>
    </div>
  </zw-card>
</template>
<script lang="ts" setup>
import ZwCard from "@/components/CardFrame/ZwCard.vue";
import ZwDateRangePicker from "@/components/Form/ZwDateRangePicker.vue";
import DateUtil from "@/plugins/date";
import ApiTree from "@/server/api-tree";
import { onMounted, ref, watch } from "vue";
import * as echarts from 'echarts';

const query = ref<{
  dateStart: string,
  dateEnd: string
}>({
  dateStart: DateUtil.getDateWithDaysAdded(-30),
  dateEnd: DateUtil.getDateWithDaysAdded(0)
})
const dateRange = ref<string[]>([
  DateUtil.getDateWithDaysAdded(-30),
  DateUtil.getDateWithDaysAdded(0)
]);
watch(() => dateRange.value, () => {
  if (dateRange.value.length === 2) {
    query.value.dateStart = dateRange.value[0];
    query.value.dateEnd = dateRange.value[1];
  } else {
    query.value.dateStart = DateUtil.getDateWithDaysAdded(-30)
    query.value.dateEnd = DateUtil.getDateWithDaysAdded(0)
  }
  getData();
});


const getData = async () => {
  const { success, data } = await ApiTree.afterSaleOrder.dateOrderStatistic(query.value.dateStart, query.value.dateEnd);
  if (success) {
    option.value.series = ['每日新增工单数', '每日接收快递数', '每日完成工单数'].map((x, i) => {
      return {
        name: x,
        type: "line",
        stack: "Total",
        data: data.map(y => i === 0 ? y.createCount : (i === 1 ? y.receiveCount : y.completeCount))
      }
    });
    option.value.xAxis = {
      type: 'category',
      boundaryGap: false,
      data: DateUtil.getDateRange(query.value.dateStart, query.value.dateEnd)
    }
    dateStatisticChart.value = echarts.init(document.getElementById('dateStatistic'));
    dateStatisticChart.value?.setOption(option.value);
  }
}
const dateStatisticChart = ref<echarts.ECharts>();
onMounted(() => {

  getData();
})
/** Echarts配置 */
const option = ref<echarts.EChartsOption>({
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['每日新增工单数', '每日接收快递数', '每日完成工单数']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  yAxis: {
    type: 'value'
  },
  series: []
});
</script>
<style lang="scss" scope>
.order-statistic {
  width: 100%;
  height: calc(100% - 32px);

  .item {
    // width: calc(66% - 12px);
    height: 100%;
    margin: 0px 6px;
  }
}
</style>
